3. 변수 추출하기

변수 인라인하기(6.4)과 반대

• 복잡한 로직을 구성하는 단계마다 변수로 이름 붙이기
• 디버깅 시 break point 설정 용이
• (주의) 문맥을 고려하여 현재 선언된 함수보다 더 넓은 문맥에서까지 의미가 된다면 함수로 추출하는 것을 권장

절차

1. 추출할 표현식에 사이드이펙트가 없는지 확인
   
2. 상수를 하나 선언 후 표현식 대입
   
3. 새로 만든 변수로 교체

예시 코드 1️⃣

const pad2digit = digit => digit.length >= 2 ? digit : `0${digit}`

😞 Before

const timerFormat = value => `${pad2digit(`${parseInt(value / 60)}`)}:${pad2digit(`${value % 60}`)}`

😃 After

// :)
const timerFormat = value => {
    const _minutes = parseInt(value / 60)
    const minutes = pad2digit(`${_minutes}`)
    const seconds = pad2digit(`${value % 60}`)

    return `${minutes}:${seconds}`
}

예시 코드 2️⃣

😞 Before

const showExistToast = () => {
    const exitAlertCode = step === '4' ? '저장하고 이탈' : '저장하지 않고 이탈'
    toast(exitAlertCode)
}

const isValidReferer = () => {
    switch (step) {
        case '4':
            return isSurlEnter(query)
        default:
            return isHomeEnter
    }
}

😃 After

const lastStep = step === '4'

const showExistToast = () => {
    const exitAlertCode = lastStep ? '저장하고 이탈' : '저장하지 않고 이탈'
    toast(exitAlertCode)
}

const isValidReferer = () => {
    return lastStep ? isSurlEnter(query) : isHomeEnter
}